<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="登录"
        left-arrow
        @click-left="$router.back()"
      />
    </header>
    <div class="content">
      <van-field v-model="loginname" clearable placeholder="手机号/邮箱/账户名" />
      <van-field v-model="password" clearable placeholder="密码" />
      <van-button @click="login" :disabled="!flag" round block color="#ff6666" style="margin-top: 20px">登录</van-button>
      <p class="note">
        <van-checkbox icon-size="16" v-model="checked" >同意*******协议</van-checkbox>
      </p>
      <router-link to="/register">快速注册</router-link>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Field, Button, Checkbox, Dialog, NavBar, Toast } from 'vant'
import { mapActions } from 'vuex'
Vue.use(Field)
Vue.use(Button)
Vue.use(Checkbox)
Vue.use(Dialog)
Vue.use(NavBar)
Vue.use(Toast)
export default {
  data () {
    return {
      checked: true,
      loginname: '18813007814',
      password: '123456'
    }
  },
  computed: {
    flag () {
      if (this.loginname.length > 2 && this.password.length > 5) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    ...mapActions({
      loginAction: 'user/loginAction' // 分模块的关键
    }),
    login () {
      // this.$store.dispatch('loginAction', {
      //   loginname: this.loginname,
      //   password: this.password
      // })
      this.loginAction({
        loginname: this.loginname,
        password: this.password
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.note
  position fixed
  bottom 5px
  left 50%
  transform translateX(-50%)
  opacity 0.4
</style>
